<template>
  <div class="index" :class="{'fixed':activeTag!=''}" ref="index" @scroll="scroll($event);">
     <div class="container" ref="container">
        <div class="search">
              <input type="text" v-model="search.key" placeholder="搜索" @click="showSearchPage();" readonly />
        </div>
        <div class="nav">
            <ul class="menu">
                 <li :class="{active:activeTag=='grade'}" @click="sort('grade')">年级<span></span></li>
                 <li :class="{active:activeTag=='subject'}" @click="sort('subject')">科目<span></span></li>
                 <li :class="{active:activeTag=='teachingTime'}" @click="sort('teachingTime')">时间<span></span></li>
                 <li :class="{active:activeTag=='subjectType'}" @click="sort('subjectType')">文理科<span></span></li>
                 <li :class="{active:activeTag=='sex'}" @click="sort('sex')">性别<span></span></li>
            </ul>
            <!--年级选项卡-->
            <div class="tab grade_tab" v-show="activeTag=='grade'">
                <ul>
                    <li v-for="(item,index) in gradeList" :class="{'active':item==options.grade}" @click="select('grade',item)">{{item}}</li>
                </ul>
            </div>
            <!--科目选项卡-->
            <div class="tab subject_tab" v-show="activeTag=='subject'">
                <ul>
                    <li v-for="(item,index) in subjectList" :class="{'active':item==options.subject}" @click="select('subject',item)">{{item}}</li>
                </ul>
            </div>
            <!--时间选项卡-->
            <div class="tab time_tab"  v-show="activeTag=='teachingTime'">
                <ul>
                    <li v-for="(item,index) in timeList" :class="{'active':item==options.teachingTime}" @click="select('teachingTime',item)">{{item}}</li>
                </ul>
            </div>
            <!--性别选项卡-->
            <div class="tab sex_tab" v-show="activeTag=='sex'">
                <ul>
                    <li v-for="(item,index) in sexList" :class="{'active':item==options.sex}" @click="select('sex',item)">{{item | aa}}</li>
                </ul>
            </div>
            <!--文理科选项卡-->
            <div class="tab subjectType_tab" v-show="activeTag=='subjectType'">
                <ul>
                    <li v-for="(item,index) in subjectTypeList" :class="{'active':item==options.subjectType}" @click="select('subjectType',item)">{{item | bb}}</li>
                </ul>
            </div>
        </div>
        <!--数据容器-->
        <ul class="container">
             <router-link  v-for="teacher in teachers" tag="li" :to="{name:'teacherInfo',params:{id:teacher.id}}">
                 <div class="thum">
                      <img :src="teacher.compressPicture"/>
                 </div>
                 <div class="info">
                      <div class="top">
                           <label>{{teacher.chname}}</label>
                           <p><star :score="teacher.rating"></star></p>
                           <span>{{teacher.scoreLevel}}</span>
                      </div>
                      <div class="middle">
                           <span>{{teacher.school}}</span>
                           <label>{{teacher.grade}} {{teacher.sex | aa}}</label>
                      </div>
                      <div class="bottom">
                           <span v-if="teacher.subject1">{{teacher.subject1}}</span>
                           <span v-if="teacher.subject2">{{teacher.subject2}}</span>
                           <label>授课{{teacher.teachDuration}}小时</label>
                      </div>
                 </div>
             </router-link>
        </ul>
        <p class="loading_tip" v-show="!finish">{{loading_tip}}</p>
        <i class="toTop" v-show="toTop" @click="toBackTop();"></i>
        <search :search="search"></search>
        <div class="mengban" v-show="mb_show"></div>
        <public-footer></public-footer>
     </div>
  </div>
</template>

<script>
import publicFooter from './footer'
import star from './star'
import search from './search'
export default {
  data () {
    return {
      code:'',
      search: {
        key:'',
        initialKey:'',
        show:false
      },
      activeTag:'',
      gradeList:['不限','一年级','二年级','三年级','四年级','五年级','六年级','七年级','八年级','九年级','高一','高二','高三'],
      subjectList:['不限','语文','数学','英语','物理','化学','生物','政治','历史','地理'],
      timeList:['不限','平时','周末'],
      sexList:['不限','0','1'],
      subjectTypeList:['不限','0','1'],
      options:{
        grade:'',
        subject:'',
        teachingTime:'',
        subjectType:'',
        sex:''
      },
      page:0,
      rows:10,
      finish:true,
      loading_tip:'',
      teachers:[],
      toTop:false
    }
  },
  components:{
    publicFooter,
    star,
    search
  },
  mounted:function(){
    this.code=this.getQueryString("code");
    this.getOpenId();
    this.getListData();
  },
  activated:function(){
    if(sessionStorage.scrollTop){
        this.$refs.index.scrollTop=sessionStorage.scrollTop;
     }else{
        sessionStorage.scrollTop=''; 
     }
  },
  filters:{
    aa(num){
       if(num==0){
         return "男";
       }else if(num==1){
         return "女";
       }else{
         return "不限";
       }
    },
    bb(num){
       if(num==0){
         return "文科";
       }else if(num==1){
         return "理科";
       }else{
         return "不限";
       }
    }
  },
  watch:{
    options:{
　　　handler(newVal,oldVal){
　　　　this.page=0;
        this.finish=true;
        this.getListData();
　　　},
　　　deep:true
　　},
    'search.key':function(){
      this.page=0;
      this.finish=true;
      this.getListData();
    }
  },
  methods:{
    getQueryString(name) { 
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
        var r = window.location.search.substr(1).match(reg); 
        if (r != null) return unescape(r[2]); return null; 
    },
    getOpenId(){
       let _this=this;
        _this.$http.get('/jeewx/canxinController.do?getUserInfoByAuthorCode&code='+_this.code).then((data)=>{
            console.log(data);
            sessionStorage.user_nickname=data.body.nickname;
            sessionStorage.user_city=data.body.city;
            sessionStorage.user_headimgurl=data.body.headimgurl;
            sessionStorage.user_openid=data.body.openid;
            sessionStorage.user_province=data.body.province;
            sessionStorage.user_sex=data.body.sex;
            
        })
    },
    scroll(el){
      sessionStorage.scrollTop=el.currentTarget.scrollTop;
      let _this=this;
      /*console.log('container:'+this.$refs.container.offsetHeight);
      console.log('scrollTop:'+el.currentTarget.scrollTop);
      console.log('bodyHeight:'+document.body.clientHeight);*/
      if(this.$refs.container.offsetHeight-el.currentTarget.scrollTop-document.body.clientHeight<150){
        _this.getListData();
      }
      if(el.currentTarget.scrollTop>800){
        _this.toTop=true;
      }else{
        _this.toTop=false;
      }
    },
    sort(tag){
        if(this.activeTag==tag){
            this.activeTag='';
        }else{
            this.activeTag=tag;
        }
    },
    select(ng1,ng2){
        let _this=this;
        if(ng2=="不限"){
           _this.options[ng1]='';
        }else{
          _this.options[ng1]=ng2;
        }
        setTimeout(function(){_this.activeTag='';},100);
    },
    showSearchPage(){
        this.search.initialKey=this.search.key;
        this.search.show=true;
    },
    toBackTop(){
      this.$refs.index.scrollTop=0;
    },
    getListData(){
        var _this=this;
        
        if(_this.finish){
           _this.finish=false;
           _this.page++;
           if(_this.page==1){
             _this.teachers=[];
           }
           _this.loading_tip="数据加载中...";
           if(_this.options.teachingTime=='平时'){
              var time='1|2|3|4|5';
           }else if(_this.options.teachingTime=='周末'){
              var time='6|7';
           }else{
              var time='';
           }
           _this.$http.post("/api/teacherController.do?searchTeacher",
                        {
                          "content": _this.search.key,
                          "subject": _this.options.subject,
                          "grade": _this.options.grade,
                          "teachingTime": time,
                          "sex": _this.options.sex,
                          "subjectType": _this.options.subjectType,
                          "page": _this.page,
                          "rows": _this.rows
                        })
            .then(
              (response)=>{
                console.log(response);
                if(response.body.rows.length>0){
                  _this.finish=true;
                  if(_this.page==1){
                     _this.teachers=response.body.rows;
                  }else{
                     _this.teachers.push.apply(_this.teachers,response.body.rows);
                  }
                }else{
                  if(_this.page==1){
                     _this.teachers=response.body.rows;
                     _this.loading_tip="暂无搜索结果";
                  }else{
                     _this.loading_tip="加载完毕";
                  }
                }
              },
              (error)=>{
                _this.finish=true;
                console.log(error);
              }
            );
        }
    }
  },
  computed:{
    mb_show:function(){
        return this.activeTag? true:false;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.index
{
    overflow:auto;
    height:100%;
    padding-bottom:1.3rem;
    -webkit-overflow-scrolling : touch;
    box-sizing: border-box;
    &.fixed
    {
      position:fixed;
      width:100%;
      overflow:hidden;
    }
    .container{
        .search
        {
            position:relative;
            background:#f5f5f5;
            padding:0.2rem 0.24rem;
            z-index: 100;
            input
            {
                background:#fff;
                border-radius:0.05rem;
                width:100%;
                height:0.7rem;
                box-sizing:border-box;
                padding:0 0.2rem;
            }
        }
        .nav
        {
            position:relative;
            background:#fff;
            border-top:1px solid #eee;
            border-bottom:1px solid #eee;
            z-index: 100;
            .menu
            {
                padding:0.2rem 0.15rem;
                overflow:hidden;
                li
                {
                    width:20%;
                    line-height:0.5rem;
                    height:0.5rem;
                    float:left;
                    text-align:center;
                    border-right:1px solid #ccc;
                    box-sizing:border-box;
                    font-size:0.24rem;
                    &:last-child
                    {
                        border-right:none !important;
                    }
                    &.active
                    {
                       span
                       {
                          transform: rotate(-135deg);
                          top:0;
                       }
                    }
                    span
                    {
                        width:0.1rem;
                        height:0.1rem;
                        display:inline-block;
                        border-right:1px solid #666;
                        border-bottom:1px solid #666;
                        transform: rotate(45deg);
                        margin-left:5px;
                        vertical-align:middle;
                        position:relative;
                        top:-1.5px;
                    }
                }
            }
            .tab
            {
                border-top:1px solid #ccc;
                width:100%;
                position:absolute;
                top:100%;
                background:#fff;
                max-height:7rem;
                overflow-y:auto;
                box-shadow:0 4px 7px 0px rgba(0,0,0,0.1);
                z-index: 100;
                ul 
                {
                    padding:0 0.2rem;
                    li
                    {
                        line-height:0.8rem;
                        border-bottom:1px solid #eee;
                        text-indent:0.2rem;
                        &.active
                        {
                            &::after
                            {
                                content:'√';
                                line-height:0.8rem;
                                height:0.8rem;
                                width:0.6rem;
                                float:right;
                                display:inline-block;
                                color:red;
                            }
                        }
                        &:last-child
                        {
                            border:none;
                        }
                    }
                }
            }
        }
        .container
        {
            li
            {
                background:#fff;
                margin-top:0.2rem;
                padding:0.3rem;
                display:flex;
                border-top:1px solid #eee;
                border-bottom:1px solid #eee;
                .thum
                {
                    flex:0 0 1.8rem;
                    height:1.8rem;
                    margin-right:0.3rem;
                    img
                    {
                        width:100%;
                        height:100%;
                    }
                }
                .info
                {
                    flex:1;
                    position:relative;
                    .top
                    {
                        overflow:hidden;
                        position:absolute;
                        left:0;
                        top:0;
                        width:100%;
                        label
                        {
                            float:left;
                            font-size:0.32rem;
                        }
                        p
                        {
                            display:inline-block;
                            float:left;
                        }
                        span
                        {
                            float:right;
                        }
                    }
                    .middle
                    {
                        overflow:hidden;
                        position:absolute;
                        left:0;
                        top:50%;
                        margin-top:-0.15rem;
                        width:100%;
                        span
                        {
                            float:left;
                        }
                        label
                        {
                            float:right;
                        }
                    }
                    .bottom
                    {
                        overflow:hidden;
                        position:absolute;
                        left:0;
                        bottom:0;
                        width:100%;
                        span
                        {
                            line-height:0.4rem;
                            height:0.4rem;
                            padding:0 0.2rem;
                            border:1px solid #ccc;
                            font-size:0.22rem;
                        }
                        label
                        {
                            float:right;
                        }
                    }
                }
            }
        }
        .loading_tip
        {
          text-align:center;
          padding-top:0.3rem;
          font-size:0.28rem;
        }
        .toTop
        {
          display:inline-block;
          width:1rem;
          height:1rem;
          background-image:url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1497788903228&di=2f9280a20412e1704688a3fbb156ae89&imgtype=0&src=http%3A%2F%2Fwww.laozuo.org%2Fwp-content%2Fuploads%2F2014%2F06%2Fbacktop-3.jpg);
          background-size:100%;
          background-position:center;
          background-repeat:no-repeat;
          position:fixed;
          right:0.2rem;
          bottom:1.2rem;
          border-radius:50%;
          border:1px solid #078def;
        }
        .mengban
        {
            width:100%;
            height:100%;
            position:fixed;
            left:0;
            top:0;
            background:rgba(0,0,0,0.7);
        }
    }
}
</style>
